import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Tooltip from '@kuiper-components/tooltip';
import s from './style.module.css';
import { datetime } from '../../../../../../../common/formatter';

const vulType = { high: '高危', middle: '中危', low: '低危' };
function EventCount({ className, row }) {
	const vul = row?.monitor_status.vul;
	return (
		<div>
			<Tooltip
				placement="top"
				// trigger={['click']}
				overlay={
					<div>
						<p className={s.upTime}>
							监测完成时间:{datetime(row.update_time) || '- -'}
						</p>
						<table className={s.table}>
							<tbody>
								<tr>
									{Object.values(vulType).map(label => (
										<td key={label}>{label}</td>
									))}
								</tr>
								<tr>
									{Object.keys(vulType).map(key => (
										<td key={key} className={cn(s[key], s.count)}>
											{vul?.[key]}
										</td>
									))}
								</tr>
							</tbody>
						</table>
					</div>
				}
			>
				<span className={cn(className, s.eventCount)}>
					{Object.keys(vulType).map(key => (
						<span key={key} className={cn(s.securityEventCount, s[key])}>
							{vul?.[key] > 99 ? '99+' : vul?.[key]}
						</span>
					))}
				</span>
			</Tooltip>
		</div>
	);
}

EventCount.propTypes = {
	row: PropTypes.any,
	className: PropTypes.string,
	vul: PropTypes.shape({}),
};
EventCount.defaultProps = {
	className: '',
	vul: {},
};

export default EventCount;
